<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div_1{
				
				border: 1px solid;
				border-color:black ;
				width: 250px;
				height: 100px;
			}
			#div_2{
				margin-top: 30px;
				margin-left: 50px;
				width: 160px;
				height: 30px;
				border-color:black ;
				border: 1px solid;
			}
			#div_3{
				
				height: 30px;
				width: 5px;
				background: chartreuse;
				text-align: center;
			}
			
		
			
		</style>
		<script type="text/javascript">
			function move() {
  		var elem = document.getElementById("div_3");   
  		var number=elem.firstChild; 
  		var width = 0;
  		var count=0;
  		var id = setInterval(frame, 100);
  		function frame() {
   		 if (width == 100&count==100) {
      clearInterval(id);
    		} else {
      width++; 
      count++;
      elem.style.width = width + '%';  
      number.nodeValue++; 
      
    }
    if(number.nodeValue==100){
    	number.nodeValue=0;
    }
  }
}



		</script>
	</head>
	<body>
		<div id="div_1">
			<div id="div_2">
				<div id="div_3">
				0
				</div>
				
			</div>
		</div>
		<button onclick="move()">开始</button>
	</body>
</html>
